
<template>
  
        <el-row :gutter="20">
            <el-col :xs="24" :sm="18">
                <el-card shadow="always" class="mb-[1.2rem]" v-for="item in articleList" :key="item.id">
                    <div class="article-item w-[100%] md:h-[18rem] 24rem flex md:flex-row flex-col overflow-hidden">
                        <div class="article-cover md:w-[45%] md:h-[100%]  w-[100%] h-[50%]" > 
                            <!--duration 动画参数-->
                          <el-image
                          class="w-[100%] h-[100%] duration-300 hover:scale-125" fit="cover" @click="getToArraticel(item.id)"
                            :src="item.banner" 
                            ></el-image>    
                        </div>
                        <div class="article-content md:w-[55%] md:h-[100%]  w-[100%] h-[50%] flex flex-col p-[1rem] justify-center"> 
                            <div class='title text-3xl mb-5 ' @click="getToArraticel(item.id)">{{item.title}}</div>
                             <div class='info text-md mb-5 flex flex-wrap items-center'>
                                 <div class="mr-[0.3rem] flex items-center">
                                <Fa6RegularCalendarDays class="w-[1rem] h-[1rem] mr-[0.2rem]" />
                                <span class='ml-2'>{{item.createTime}}</span>
                                 | 
                                </div>
                                  <div class="mr-[0.3rem]  flex items-center">
                                <Fa6RegularClock class="w-[1rem]  h-[1rem]  mr-[0.2rem]" />
                                <span class='ml-2'>{{item.updateTime}}</span>
                                 | 
                                </div>
                                <div class="mr-[0.3rem]  flex items-center">
                                <FaRegularListAlt class="w-[1rem]  h-[1rem]  mr-[0.2rem]" />
                                <span class='ml-2'>{{item.category}}</span>
                                 | 
                                </div>
                                <div class="mr-[0.3rem]  flex items-center">
                                <FaRegularBookmark class="w-[1rem]  h-[1rem]  mr-[0.2rem]" />
                                <span class='ml-2'>{{item.tags.join('、')}}</span>
                                 | 
                                </div>
                                    <div class="mr-[0.3rem]  flex items-center">
                                <Fa6RegularThumbsUp class="w-[1rem]  h-[1rem]  mr-[0.2rem]" />
                                <span class='ml-2'>{{item.views}} </span>
                                 | 
                                </div>
                                  <div class="mr-[0.3rem]  flex items-center">
                                <Fa6RegularEye class="w-[1rem]  h-[1rem]  mr-[0.2rem]" />
                                <span class='ml-2'>{{item.likes}} </span>
                                
                                </div>
                             </div>
                              <div class='desc text-xl w-[100%] overflow-hidden text-ellipsis whitespace-nowrap'>
                                {{item.desc}}
                                </div>
                        </div>
                    </div>
                </el-card>
                <el-pagination v-model:page-size="params.pageSize"  v-model:current-page="params.currentPage"   background layout="prev, pager, next" :total="staicArticleList.length"  class="justify-center items-center mb-[1.2rem]" @change="getArticelList"/>

            </el-col>
            
            <el-col :xs="24" :sm="6">
                <el-card class="mb-[1.2rem]">
                    <div class="banner w-[100%] h-[6rem]">
                       <el-image
                          class="w-[100%] h-[100%] " fit="cover"
                            :src="bgImage" 
                            ></el-image> 
                    </div>
                    <div class="info-box flex items-center p-[0.8rem]">
                        <el-avatar :size="48" class="mr-[0.8rem]" >M</el-avatar>
                        <div> 个人博客</div>
                    </div>
                    <div class="saying p-[0.5rem] text-sm"> 人为什么不能睡25小时 </div>
                    <div class="flex justify-around items-center p-[1rem]">
                        <div class="item">
                            <div class="title text-center">文章</div>
                            <div class="value text-center ">100</div>
                        </div>
                        <div class="item">
                            <div class="title text-center">分类</div>
                            <div class="value text-center">100</div>
                        </div>
                        <div class="item">
                            <div class="title text-center">标签</div>
                            <div class="valuetext-center">100</div>
                        </div>


                    </div>
                    <div class="flex justify-around items-center px-[2rem] py-[1rem]">
                        <RiQqFill class="w-[1.8rem] h-[1.8rem]"/>
                        <IcBaselineWechat class="w-[1.8rem] h-[1.8rem]"/>
                        <MingcuteBilibiliFill class="w-[1.8rem] h-[1.8rem]"/>
                        <SimpleIconsGitee class="w-[1.8rem] h-[1.8rem]"/>
                    </div>
                </el-card>
                <el-affix style="width: inherit" offset="60">
                 <el-card class="box-card mb-[1.2rem]">
                    <template #header>
                        <div class="flex items-center">
                            <IconParkSolidVolumeNotice class="w-[1.8rem] h-[1.8rem] mr-[0.5rem]"/>
                            <div class="text-xl font-bold">
                             公告
                            </div>
                        </div>
                    </template>
                    <div class="mr-[0.2rem]">偷懒的人，时间一定会惩罚他，努力的人，命运不会辜负他！</div>
                </el-card>
                <el-card class="box-card mb-[1.2rem]">
                    <template #header>
                        <div class="flex items-center">
                            <LetsIconsLableFill class="w-[1.8rem] h-[1.8rem] mr-[0.5rem]"/>
                            <div class="text-xl font-bold">
                             标签
                            </div>
                        </div>
                    </template>
                    <div class="flex flex-wrap items-center p-[1rem]">
                        <div class="py-[0.1rem] px-[0.3rem] bg-slate-300 mr-[0.3rem] ml-[0.3rem] mb-[0.3rem] rounded-md" v-for="tag in tagList" :key="tag">
                            {{tag  }}
                        </div>
                    </div>
                </el-card>
                
                 <el-card class="box-card mb-[1.2rem]">
                            <template #header>
                                <div class="flex items-center">
                                    <StreamlineArrowCursor2Solid class="w-[1.8rem] h-[1.8rem] mr-[0.5rem]"/>
                                    <div class="text-xl font-bold">
                                    网站咨讯
                                    </div>
                                </div>
                            </template>
                            <div class="p-[1rem] flex flex-col justify-center items-center">
                                <div class="item flex items-center justify-between w-[100%]">
                                    <div class="title text-md">访问量</div>
                                   <div class="value text-md">20 </div>
                                </div>
                                 <div class="item flex items-center justify-between w-[100%]">
                                    <div class="title text-md">运行时间</div>
                                   <div class="value text-md">20天 </div>
                                </div>
                                 <div class="item flex items-center justify-between w-[100%]">
                                    <div class="title text-md">博客访问次数</div>
                                   <div class="value text-md">20W</div>
                                </div>
                            </div>
                        </el-card>
                </el-affix>
                
            </el-col>
        </el-row>

</template>
<script setup>
 import { onMounted, reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'

 import bgImage from '@/assets/image/bg-image.jpg'
import FaRegularListAlt from "~icons/fa-regular/list-alt";
import FaRegularBookmark from "~icons/fa-regular/bookmark";
import Fa6RegularThumbsUp from "~icons/fa6-regular/thumbs-up";
import Fa6RegularEye from "~icons/fa6-regular/eye";
import Fa6RegularCalendarDays from "~icons/fa6-regular/calendar-days";
import Fa6RegularClock from "~icons/fa6-regular/clock"; 

import RiQqFill from '~icons/ri/qq-fill';
import IcBaselineWechat from '~icons/ic/baseline-wechat';
import MingcuteBilibiliFill from '~icons/mingcute/bilibili-fill';
import SimpleIconsGitee from '~icons/simple-icons/gitee';
import IconParkSolidVolumeNotice from '~icons/icon-park-solid/volume-notice';
import LetsIconsLableFill from '~icons/lets-icons/lable-fill'; // 标签
import StreamlineArrowCursor2Solid from '~icons/streamline/arrow-cursor-2-solid';

const router =useRouter()

const tagList=['vue','java','springboot','html','css','javascript','mysql','redis','springcloud','springmvc','springdata']

const articleList =ref([]);

const params=reactive({
    currentPage:1,
    pageSize:5
})


const staicArticleList=[
    {
        id:1,
        title:"如何使用Vue3",
        banner:bgImage,
        desc:"Vue3是一个新的前端框架，它基于Vue2.0，并且具有更好的性能和更高的开发体验。",
        createTime:"2025-09-01 10:00:00",
        updateTime:"2025-09-01 10:00:00",
        views:"1W",
        likes:"1W",
        comments:10,
        tags:["Vue3","前端"],
        category:"前端"
        
    }, {
        id:2,
        title:"如何使用Vue3",
        banner:bgImage,
        desc:"Vue3是一个新的前端框架，它基于Vue2.0，并且具有更好的性能和更高的开发体验。",
        createTime:"2025-09-01 10:00:00",
        updateTime:"2025-09-01 10:00:00",
        views:"1W",
        likes:"1W",
        comments:10,
        tags:["Vue3","前端"],
        category:"前端"
    }, {
        id:3,
        title:"如何使用Vue3",
        banner:bgImage,
        desc:"Vue3是一个新的前端框架，它基于Vue2.0，并且具有更好的性能和更高的开发体验。",
        createTime:"2025-09-01 10:00:00",
        updateTime:"2025-09-01 10:00:00",
        views:"1W",
        likes:"1W",
        comments:10,
        tags:["Vue3","前端"],
        category:"前端"
    }, {
        id:4,
        title:"如何使用Vue3",
        banner:bgImage,
       desc:"Vue3是一个新的前端框架，它基于Vue2.0，并且具有更好的性能和更高的开发体验。",
        createTime:"2025-09-01 10:00:00",
        updateTime:"2025-09-01 10:00:00",
        views:"1W",
        likes:"1W",
        comments:10,
        tags:["Vue3","前端"],
        category:"前端"
    }, {
        id:5,
        title:"如何使用Vue3",
         banner:bgImage,
        desc:"Vue3是一个新的前端框架，它基于Vue2.0，并且具有更好的性能和更高的开发体验。",
        createTime:"2025-09-01 10:00:00",
        updateTime:"2025-09-01 10:00:00",
        views:"1W",
        likes:"1W",
        comments:10,
        tags:["Vue3","前端"],
        category:"前端"
    }, {
        id:6,
        title:"如何使用Vue3",
        banner:bgImage,
        desc:"Vue3是一个新的前端框架，它基于Vue2.0，并且具有更好的性能和更高的开发体验。",
        createTime:"2025-09-01 10:00:00",
        updateTime:"2025-09-01 10:00:00",
        views:"1W",
        likes:"1W",
        comments:10,
        tags:["Vue3","前端"],
        category:"前端"
    },
]

const getArticelList=()=>{ 
    const current=(params.currentPage-1)*params.pageSize
    articleList.value=staicArticleList.slice(current,current+params.pageSize)
  
}

const getToArraticel=(id)=>{

    if(!id) return
    return router.push({
        path:"/detail",
        query:{
            id:id
        }
    })

}

 onMounted( () => { 
    getArticelList();
}) 



</script>